<template>
  <view :class="theme" style="padding-bottom: calc(env(safe-area-inset-bottom) + 150rpx);">
    <uv-sticky :bgColor="$config.COLOR_TEXT_INVERSE">
      <uv-tabs @change="changeTabs" v-bind="{
        style: { padding: `20rpx 0` },
        list: tasks,
        keyName: 'title',
        height: 36,
        scrollable: false,
        current: tabCurrent,
        bgColor: $config.COLOR_TEXT_INVERSE,
        fontSize: 28,
        activeStyle: { color: $config.COLOR_WHITE, fontWeight: 700 },
        inactiveStyle: { color: $config.COLOR_PLACEHOLDER },
        itemStyle: { fontSize: `28rpx`, padding: `12rpx` },
        lineColor: $config.COLOR_PRIMARY,
        lineHeight: 4,
        lineWidth: 60
      }" />
    </uv-sticky>

    <view class="mt-20">
      <view v-for="(item, index) in tasks[tabCurrent].list" :key="index" class="bg-section b-rounded-12 p-30"
        style="margin: 0 30rpx 20rpx;">
        <view class="flex-row items-center justify-between">
          <label>
            <uv-image radius="16" width="108" height="108" :src="include(item.task_img)" />
            <text class="ml-18 text-28">{{ item.task_name }}</text>
          </label>
          <button :disabled="!!tabCurrent" @click="submit(index)" hover-class="op-60" style="min-width: 150rpx;"
            class="m-0 color-base bg-primary b-rounded-28 text-28 lh-[2] pl-30 pr-30">
            {{ ["兑换", "进行中", "已完成"][tabCurrent] }}
          </button>
        </view>
        <view class="mt-20 flex-row justify-between">
          <view class="items-center">
            <text class="text-32">{{ item.join_coin }}</text>
            <text class="mt-8 color-placeholder">兑换龙珠</text>
          </view>
          <view class="items-center">
            <text class="text-32">{{ tabCurrent ? item.limit_times : item.period_time }}</text>
            <text class="mt-8 color-placeholder">{{ tabCurrent ? "剩余周期" : "释放周期" }}(天)</text>
          </view>
          <view class="items-center">
            <text class="text-32">{{ tabCurrent ? (item.has_profit || 0) : (item.profit || 0) }}</text>
            <text class="mt-8 color-placeholder">{{ tabCurrent ? "收益" : "每日收益" }}</text>
          </view>
          <view v-if="!+tabCurrent" class="items-center">
            <text class="text-32">{{ item.allprofit || 0 }}</text>
            <text class="mt-8 color-placeholder">总产量</text>
          </view>
        </view>
        <label v-if="tabCurrent" class="mt-40 justify-center color-placeholder">兑换时间：{{ item.create_time }}</label>
      </view>
    </view>

    <!-- <view v-if="tabCurrent === 1" class="fixed bottom-0 bg-base h-150"
      style="z-index: 9; padding-bottom: var(--window-bottom); box-sizing: content-box; left: var(--window-left); right: var(--window-right);">
      <button @click="receiveTask" url="/pages/client/main/setAddress" hover-class="tap-hover" style="margin: 30rpx;"
        class="bg-primary b-rounded-10 color-base text-center text-32 fw-bold lh-90">
        领取收益
      </button>
    </view> -->

    <view class="mt-30 mb-30 items-center">
      <uv-image v-if="!tasks[tabCurrent].list.length" :showLoading="false" width="400" height="400" class="mt-60 mb-30"
        src="/static/img/blank.png" mode="aspectFit" />
      <uv-load-more :status="tasks[tabCurrent].cache.status" :is-dot="!!tasks[tabCurrent].list.length" />
    </view>
  </view>
</template>

<script lang="ts" setup>

import { useMapState } from "@/common/libs/store";
import { pager } from "@/common/libs/utils";
import { onLoad, onPullDownRefresh } from "@dcloudio/uni-app";
import { ref, reactive, onMounted } from "vue";

declare var window: any;

const { theme } = useMapState(["theme"]);
const { $config = {} } = getApp().globalData || {};

const tasks = reactive([
  {
    title: "全部大陆",
    api: "/packList",
    type: null,
    page: 0,
    limit: 20,
    list: [] as any[],
    cache: {
      page: 1,
      list: [] as any[],
      status: "nomore"
    },
    status: 0,
    next: false,
  },
  {
    title: "进行中",
    api: "/myTask",
    type: 1,
    page: 0,
    limit: 20,
    list: [] as any[],
    cache: {
      page: 1,
      list: [] as any[],
      status: "nomore"
    },
    status: 5,
    next: false,
  },
  {
    title: "已完成",
    api: "/myTask",
    type: 0,
    page: 0,
    limit: 20,
    list: [] as any[],
    cache: {
      page: 1,
      list: [] as any[],
      status: "nomore"
    },
    status: 1,
    next: false,
  },
]);

const tabCurrent = ref(0);
const changeTabs = ({ index }: AnyObject) => {
  if (index === tabCurrent.value) return;
  const item = tasks[tabCurrent.value];
  if (item.cache.status === "loading") return;
  tabCurrent.value = index;
  item.page = 0; item.cache.page = 1;
  getData();
}

onLoad(() => {
  getData();
});

onMounted(() => {
  window.loadAdResultCallback = (e: any) => {
    if (e.eventType === "onReward") getData();
  }
});

onPullDownRefresh(() => {
  const item = tasks[tabCurrent.value];
  item.page = 0; item.cache.page = 1;
  getData();
  setTimeout(uni.stopPullDownRefresh, 360);
})

const getData = () => {
  const { api: url, type } = tasks[tabCurrent.value];
  pager({ url, data: { type } }, tasks[tabCurrent.value]);
}

const submit = async (index: number) => {
  const { id, task_name } = tasks[tabCurrent.value].list[index];

  const { tapIndex } = await uni.showActionSheet({
    title: "兑换方式",
    itemColor: $config.COLOR_PRIMARY,
    itemList: ["龙珠兑换", "碎片兑换"]
  });
  const { cancel } = await uni.showModal({
    title: "温馨提示",
    content: `确认后即可开始领取收益，确认要兑换【${task_name}】吗？`,
  });

  if (cancel) return;

  uni.request({
    url: "/joinTask",
    data: { id, type: tapIndex + 1 },
    success({ msg: title }: any) {
      uni.showToast({ title });
    }
  });
}


const receiveTask = async () => {
  uni.request({
    url: "/receiveTask",
    success({ msg: content }: any) {
      uni.showModal({ content, showCancel: false });
      uni.startPullDownRefresh();
    }
  });
}


</script>

<style lang="scss" scoped>
// scss
</style>